<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>分析生命周期</title>
    <script type="text/javascript" src="./../vue.js/vue.js"></script>
  </head>

  <body>
    <div id="root">
      <h2>当前的n值是: {{n}}</h2>
      <button @click="n++">点我n+1</button>
    </div>

    <script type="text/javascript">
      Vue.config.productionTip = false;

      new Vue({
        el: "#root",
        data: {
          n: 1,
        },
        // 初始化：生命周期、事件、但是数据代理还未开始
        // 此时：无法通过 vm 访问到 data中的数据、methods中配置的方法
        beforeCreate() {
          console.log("beforeCreate");
          console.log("beforeCreate:", this);
          // debugger;
        },

        // 初始化：数据检测、数据代理。
        // 此时：可以通过 vm 访问到 data中的数据、methods中配置的方法
        created() {
          console.log("created");
          console.log("create:", this);
          // debugger;
        },

        // 解析模板，生成虚拟DOM
        // 此时：页面呈现的是 未经Vue编译的 DOM结构，所有对 DOM的操作，最终都是无效的。
        beforeMount() {
          console.log("beforeMount");
          console.log("beforeMount:", this);
          document.querySelector("h2").innerText = "哈哈";
          // debugger;
        },

        // 将虚拟DOM 转为真实的DOM插入页面。
        // 此时：页面中呈现的是 Vue编译后DOM结构，对DOM的操作均有效，
        // 至此初始化过程结束。
        mounted() {
          console.log("mounted");
        },
      });
    </script>
  </body>
</html>
